<template>
  <div>
    <mt-navbar v-model="selected" fixed style="margin-top: 1.6rem">
      <mt-tab-item id="1">精品</mt-tab-item>
      <mt-tab-item id="2">分类</mt-tab-item>
    </mt-navbar>
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <ul class="boxUlOne boxLi">
          <li>
            <img src="../assets/小图标/榜单.png">
            <p>榜单</p>
          </li>
          <li>
            <img src="../assets/小图标/分类-主机单机.png">
            <p>单机</p>
          </li>
          <li>
            <img src="../assets/小图标/新游.png">
            <p>新游</p>
          </li>
          <li>
            <img src="../assets/小图标/预约-进行中.png">
            <p>预约</p>
          </li>
          <li>
            <img src="../assets/小图标/微信小游戏-圆.png">
            <p>小游戏</p>
          </li>
        </ul>
        <div class="boxActiveOne">
          <p>
            今日星游<span>更多 ></span>
          </p>
          <div>
            <img class="hot" src="../assets/小图标/HOT.png">
            <img src="../assets/小图标/downlos1.png">
            <p style="font-size: .45rem;color: black">海岛纪元</p>
            <p>轻沙盒向的海岛类冒险手游</p>
            <p>4.2分<span>1.49G</span>27万次安装</p>
            <span >安装</span>
          </div>
        </div>
        <div v-for="(item,index) in newdata" :key="index">
          <div class="left">
            <img :src="item.img">
          </div>
          <div class="right">
            <p>{{item.name}}</p>
            <p>{{item.active}}</p>
            <p>{{item.activeOne}}</p>
            <span>{{item.btn}}</span>
          </div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <ul class="boxUlTwo">
          <li>
            <p style="background: #0780f5">精选单机</p>
            <p style="background: #f6b803">精选网游</p>
            <p style="background: #710574">独立游戏</p>
            <p style="background: #0ee81c">棋牌游戏</p>
          </li>
          <li v-for="(item,index) in newclassify" :key="index">
            <router-link :to="{name:'Casual'}"><img :src="item.img"></router-link>
            <span>{{item.list}}</span>
            <span>{{item.listOne}}</span>
            <span>{{item.listTwo}}</span>
            <span>{{item.listThree}}</span>
            <span>{{item.listFour}}</span>
            <div class="span">{{item.name}}</div>
          </li>
        </ul>
      </mt-tab-container-item>
    </mt-tab-container>
    <mt-tabbar :fixed="true" class="tabbars">
      <mt-tab-item id="推荐">
        <router-link exact :to="{name:'Recommend'}">
          <img src="../assets/小图标/心.png">
          推荐
        </router-link>
      </mt-tab-item>
      <mt-tab-item id="应用">
        <router-link :to="{name:'Users'}">
          <img src="../assets/小图标/应用.png">
          应用
        </router-link>
      </mt-tab-item>
      <mt-tab-item id="游戏">
        <router-link :to="{name:'Game'}">
          <img src="../assets/小图标/游戏1.png">
          游戏
        </router-link>
      </mt-tab-item>
      <mt-tab-item id="排行">
        <router-link :to="{name:'Rankings'}">
          <img src="../assets/小图标/排行.png">
          排行
        </router-link>
      </mt-tab-item>
      <mt-tab-item id="管理" >
        <router-link :to="{name:'Administration'}">
          <img src="../assets/小图标/管理.png">
          管理
        </router-link>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "Game",
      data(){
          return{
            selected: '2',
            getUrl:"https://www.fastmock.site/mock/570927fb874b97eba109025ea6bd33ba/zhuchengao/game",
            newdata:[],
            getClassify:"https://www.fastmock.site/mock/570927fb874b97eba109025ea6bd33ba/zhuchengao/classify",
            newclassify:[]
          }
      },
      methods:{
          gets(){
            axios.get(this.getUrl)
              .then(
                res=>{
                  this.newdata = res.data.data;
                  console.log(this.newdata)
                }
              )
              .catch(error=>{
                console.log(error)
              });
            axios.get(this.getClassify)
              .then(res=>{
                this.newclassify = res.data.classify;
                console.log(this.newclassify)
              })
          }
      },
      mounted() {
          this.gets()
      }
    }
</script>

<style scoped>

</style>
